import React , { useState } from 'react';
import Footer from '../../components/Footer';
import './HomePage.css';

import search from '../../assets/images/search.png'; // 正确导入方式
import { Tabs } from 'react-vant'
import { Swiper } from 'react-vant'; 
import { useNavigate } from 'react-router-dom'; // 添加路由导航
import Arrow from '../../components/Arrow'; // 正确导入箭头组件

// _________________________数据___开始______________________________
// 分类配置数据
const categories = [
  { id: 1, title: '推荐', key: '精选推荐内容...' },
  { id: 2, title: '男生', key: '男生频道热门作品...' },
  { id: 3, title: '女生', key: '女生频道精选推荐...' },
  { id: 4, title: '都市', key: '都市生活类小说...' },
  { id: 5, title: '玄幻', key: '玄幻奇幻类作品...' }
];

// 轮播图数据
const swiperItems = [
  {
    id: 1,
    imagess: require('../../assets/images/book5.png'),
    title: '热门玄幻大作',
    subtitle: '《九霄灵契》全网首发',
    link: '/book/123',
    textColor: '#fff' // 文字颜色
  },
  {
    id: 2,
    imagess: require('../../assets/images/矩形 8.png'),
    title: '热门玄幻大作',
    subtitle: '《九霄灵契》全网首发',
    link: 'https://baidu.com/',
    textColor: '#fff' // 文字颜色
  },
  {
    id: 3,
    imagess: require('../../assets/images/ceshi.png'),
    title: '热门玄幻大作',
    subtitle: '《九霄灵契》全网首发',
    link: '/book/123',
    textColor: '#fff' // 文字颜色
  }
];

//精选分类
const verybooks = [
  {
    img: "https://img.js.design/assets/img/66cc1feb5d6526e40f75a03e.png#4244cc406b2d87653b32eb063f9eccae",
    label: "女频热书",
    link: "https://example.com/girls-books"
  },
  {
    img: "https://img.js.design/assets/img/66cc20912bda29877d7b4ec2.png#52a79fae08be2810e60bbf7ebef91893",
    label: "男频佳作",
    link: "https://example.com/boys-books"
  },
  {
    img: "https://img.js.design/assets/img/66cc20ac8afcb6064dc120cd.png#343cf13b152ad0f44c71307018eb158b",
    label: "热门影视",
    link: "https://example.com/hot-movies"
  },
  {
    img: "https://img.js.design/assets/img/66cc20db2bda29877d7b6768.png#97da0d4978b0d0411530375994daf4cd",
    label: "经典中外",
    link: "https://example.com/classics"
  }
];

//数据人气榜单
// 放在组件外或者 state 中都行
const books = [
  { img: 'https://img.js.design/assets/img/66cc23c084616e6f1df8c005.png', title: '大宋的智慧', author: '张三', ids:'1' },
  { img: 'https://img.js.design/assets/img/66cc22c284616e6f1df85817.png', title: '大主宰',    author: '李四', ids:'13' },
  { img: 'https://img.js.design/assets/img/66cc235e351574788ad2348c.png', title: '诡秘之主',  author: '王五', ids:'21' },
  { img: 'https://img.js.design/assets/img/66cc23e23f2e4561fef266f7.png', title: '经典之作',  author: '赵六', ids:'41' },
  { img: 'https://img.js.design/assets/img/66cc235e351574788ad2348c.png', title: '诡秘之主',  author: '王五', ids:'21' },
  { img: 'https://img.js.design/assets/img/66cc235e351574788ad2348c.png', title: '诡秘之主',  author: '王五', ids:'21' },
  // ……后面如果要补，就继续往这里 push
];


// _________________________数据_结束________________________________




const HomePage = () => {

    // _________________________逻辑_开始________________________________
    const navigate = useNavigate(); // 新增路由导航
  // 正确：在组件内部定义处理函数
  const handleClick = (link) => {
    console.log('点击链接：', link);
    if (/^https?:\/\//.test(link)) {
      window.open(link, '_blank', 'noopener,noreferrer');
    } else {
      alert(`路由跳转至：${link}`);
      // 后续需在此处添加路由跳转逻辑
      navigate(link); // 实际执行路由跳转
    }
  };


  //点击查询方法
    // Tab 切换处理
    const handleTabChange = (key) => {
      setActiveTab(key);

     // 在这里可以执行相应的查询操作
     // 比如发送请求到后端获取对应分类的数据
     if (key === '男生') {
      // 执行查询操作
      console.log('执行查询分类操作：', key);
      // 查到的数据
      let verybooks=[
        {
          img: "https://img.js.design/assets/img/66cc1feb5d6526e40f75a03e.png#4244cc406b2d87653b32eb063f9eccae",
          label: "女频热书2",
          link: "https://example.com/girls-books"
        },
        {
          img: "https://img.js.design/assets/img/66cc20912bda29877d7b4ec2.png#52a79fae08be2810e60bbf7ebef91893",
          label: "男频佳作2",
          link: "https://example.com/boys-books"
        },
        {
          img: "https://img.js.design/assets/img/66cc20ac8afcb6064dc120cd.png#343cf13b152ad0f44c71307018eb158b",
          label: "热门影视2",
          link: "https://example.com/hot-movies"
        },
        {
          img: "https://img.js.design/assets/img/66cc20db2bda29877d7b6768.png#97da0d4978b0d0411530375994daf4cd",
          label: "经典中外2",
          link: "https://example.com/classics"
        }
      ];
      setverybooksdata(verybooks); // 更新 state
    } else  if (key === '女生') {
      // 执行查询操作
      console.log('执行查询分类操作：', key);
      // 查到的数据
      let verybooks=[
        {
          img: "https://img.js.design/assets/img/66cc1feb5d6526e40f75a03e.png#4244cc406b2d87653b32eb063f9eccae",
          label: "女频热书3",
          link: "https://example.com/girls-books"
        },
        {
          img: "https://img.js.design/assets/img/66cc20912bda29877d7b4ec2.png#52a79fae08be2810e60bbf7ebef91893",
          label: "男频佳作3",
          link: "https://example.com/boys-books"
        },
        {
          img: "https://img.js.design/assets/img/66cc20ac8afcb6064dc120cd.png#343cf13b152ad0f44c71307018eb158b",
          label: "热门影视3",
          link: "https://example.com/hot-movies"
        },
        {
          img: "https://img.js.design/assets/img/66cc20db2bda29877d7b6768.png#97da0d4978b0d0411530375994daf4cd",
          label: "经典中外3",
          link: "https://example.com/classics"
        }
      ];
      setverybooksdata(verybooks); // 更新 state
    } else if (key === '都市') {
        // 执行查询操作
        console.log('执行查询分类操作：', key);
        // 查到的数据
        let verybooks=[
          {
            img: "https://img.js.design/assets/img/66cc1feb5d6526e40f75a03e.png#4244cc406b2d87653b32eb063f9eccae",
            label: "女频热书4",
            link: "https://example.com/girls-books"
          },
          {
            img: "https://img.js.design/assets/img/66cc20912bda29877d7b4ec2.png#52a79fae08be2810e60bbf7ebef91893",
            label: "男频佳作4",
            link: "https://example.com/boys-books"
          },
          {
            img: "https://img.js.design/assets/img/66cc20ac8afcb6064dc120cd.png#343cf13b152ad0f44c71307018eb158b",
            label: "热门影视4",
            link: "https://example.com/hot-movies"
          },
          {
            img: "https://img.js.design/assets/img/66cc20db2bda29877d7b6768.png#97da0d4978b0d0411530375994daf4cd",
            label: "经典中外4",
            link: "https://example.com/classics"
          }
        ];
        setverybooksdata(verybooks); // 更新 state
    }
    else {
      // 执行其他查询操作
      console.log('执行其他查询分类操作：', key);
        // 执行查询操作
        console.log('执行查询分类操作：', key);
        // 查到的数据
        let verybooks=[
          {
            img: "https://img.js.design/assets/img/66cc1feb5d6526e40f75a03e.png#4244cc406b2d87653b32eb063f9eccae",
            label: "女频热书",
            link: "https://example.com/girls-books"
          },
          {
            img: "https://img.js.design/assets/img/66cc20912bda29877d7b4ec2.png#52a79fae08be2810e60bbf7ebef91893",
            label: "男频佳作",
            link: "https://example.com/boys-books"
          },
          {
            img: "https://img.js.design/assets/img/66cc20ac8afcb6064dc120cd.png#343cf13b152ad0f44c71307018eb158b",
            label: "热门影视",
            link: "https://example.com/hot-movies"
          },
          {
            img: "https://img.js.design/assets/img/66cc20db2bda29877d7b6768.png#97da0d4978b0d0411530375994daf4cd",
            label: "经典中外",
            link: "https://example.com/classics"
          }
        ];
        setverybooksdata(verybooks); // 更新 state
    }

    };

  // activeTab 存的就是 name 值
  const [activeTab, setActiveTab] = useState(categories[0].key);
    // booksData 存人气榜单
    const [verybooksdata, setverybooksdata] = useState(verybooks);
// _________________________逻辑_结束________________________________





  return (
    <div>
    
       {/* 专业搜索框实现 */}
     <div className='search'> 
      <img src={search} alt='search'></img>
     <input 
          type="text" 
          className="search-input"
          placeholder="请输入关键词搜索"
        />
        </div>

        {/* 分类 */}
        <div className='classify'>
        <div className='demo-tabs'>
        <Tabs 
            // defaultActive={0} 
            active={activeTab}         // 直接用 key 作为 active
            type="line" 
            color="#ee0a24"  // 主题色
            sticky  // 吸顶效果
            background="black"  // 背景颜色
            onChange={handleTabChange}  // 添加 onChange 事件处理函数
          >
            {categories.map(category => (
              <Tabs.TabPane 
                key={category.id} 
                name={category.title}        // ← 一定要写这句！
                title={category.title}
              >
                <div className="category-content">
                  



                  {/* 轮播图开始 */}
                  <div className="demo-swiper">
                  {/* 修正后的轮播图 */}
                <Swiper slideSize={80} trackOffset={10}>
                {swiperItems.map((itmes, index) => (
                          <Swiper.Item key={index}  
                          onClick={() => handleClick(itmes.link)}
                          style={{ cursor: 'pointer' }}
                          >
                            <img 
                              src={itmes.imagess} 
                              alt={`轮播图${index + 1}`}
                              className="swiper-img"
                            />
                          </Swiper.Item>
                        ))}
                    </Swiper>
                </div>
                 {/* 轮播图结束 */}




                  {/* 精选分类开始 */}
                      <div className='verybooks'>
                        <div className='verybooks-title'>
                          <p className='verybooks-title-p'>精选分类</p>
                          <div className='verybooks-title-all'>
                            <p>查看全部</p>
                          <Arrow direction="right" />
                          </div>
                        </div>
                        
                        
                        <div className="verybooks-content">
                          {verybooksdata.map((item, index) => (
                            <div className="verybooks-content-imem" key={index}>
                              <a href={item.link} target="_blank" rel="noopener noreferrer">
                                <img src={item.img} alt={item.label} />
                              </a>
                              <p>{item.label}</p>
                            </div>
                          ))}
                        </div>

                      </div>
                   {/* 精选分类结束 */}




                {/* 人气榜单开始 */}
                  <div className="category-topone">
                          <p className='verybooks-topone-p'>人气榜单</p>
                          <div className='verybooks-topone-all'>
                            <p>查看全部</p>
                          <Arrow direction="right" />
                          </div>
                  </div>

                 
                  <div className="category-topone-book">
                    {books.map(b => (
                      <div className="category-topone-bookitem">
                     
                        <img src={b.img} alt={b.title} />
                        <h5>{b.title}</h5>
                        <p>{b.author}</p>
                      </div>
                    ))}
                  </div>

                 
                  {/* 人气榜单结束 */}



                </div>
              </Tabs.TabPane>
            ))}
          </Tabs>
        </div>
        </div>


{/* 底部导航 */}
      <Footer style={{ position: 'fixed', bottom: 0, width: '100%' }} />
    </div>
  );




};

export default HomePage;

